<template>
  <div style="padding-bottom: 50px">
    <WebHeader/>
    <div class="aside">
      <WebAside/>
    </div>
    <div class="mainContent">
      <el-card style="padding: 34px 16px">
        <div slot="header" class="clearfix">
          <span style="font-size: 24px"><b>{{ file.articleTitle }}</b></span>
          <br>
          <span style="font-size: 15px;color: #abb8c3">{{ file.uploadTime }} • 正版特惠 • 阅读 42070</span>
        </div>

        <!--        插入文章的位置-->
        <div class="entry-content" v-html="file.article"></div>

        <el-divider/>
        <!--        点赞收藏-->
        <div style="display: flex;justify-content: space-around;font-size: 16px;padding: 5px 20px">
          <div class="collection" style="text-align: center">
          <span>
            <img height="15px" src="../../assets/icon/点赞.png" alt=""> &nbsp{{ file.likes }}
          </span>
            <!--            评论-->
            <span><i class="el-icon-chat-line-round"/>&nbsp {{ file.comments }}</span>
            <span><i class="el-icon-star-off"/>&nbsp {{ file.collection }}</span>
            <span>
               <img width="15" src="../../assets/icon/打赏.png" alt="打赏">&nbsp 25
          </span>
            <el-divider direction="vertical"/>
            <span style="text-align: center"><i class="el-icon-share"/>&nbsp 生成海报</span>
            <span>
            <img width="25" src="../../assets/icon/qq.png" alt="分享到qq">
          </span>
            <span>
            <img width="25" src="../../assets/icon/微信.png" alt="分享到qq">
          </span>
            <span>
            <img width="25" src="../../assets/icon/新浪微博.png" alt="分享到qq">
          </span>
            <span>
            <img width="25" src="../../assets/icon/QQ空间.png" alt="分享到qq">
          </span>

            <span>
            <img width="25" src="../../assets/icon/文本.png" alt="分享到qq">
          </span>
          </div>
        </div>
      </el-card>


      <el-divider/>
      <!--      上一篇下一篇-->
      <div style="position:relative;">
        <div class="changeArticle">
          上一个
        </div>
        <div class="changeArticle" style="position: absolute;right: 10px;top: 2px;line-height: 50px">
          下一个
        </div>
      </div>
    </div>
    <!--    相关推荐-->
    <div class="related" style="margin-top: 88px">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>相关推荐</span>
        </div>
        <div class="text item" style="display: flex;justify-content: space-around;flex-wrap: wrap">
          <span v-for="i in 8" :key="i" style="padding: 15px 20px">
            <i class="el-icon-caret-right"/>
            有道云笔记无敌版
          </span>
        </div>
      </el-card>
    </div>
    <!--    发表评论-->
    <div class="comment">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <img height="25" src="../../assets/icon/评论.png" alt="发表评论">
            &nbsp
            发表评论</span>
        </div>
        <div class="text item">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 20}"
            placeholder="请输入内容"
            v-model="comment.content">
          </el-input>
          <!--      todo   用户信息回显,登录与否两套方案,参考果核-->
          <div>
            <div style="display: flex;align-items: center;justify-content: space-between;background-color: #e3e3e3">
              <div style="text-align: center" align="center">
                <div style="display: flex;align-items: center;justify-content: left">
                  <el-avatar style="margin:26px 21px;"
                             round
                             :src="avatarUrl" :size="45"
                             fit="cover"/>
                  <div>{{ username }}</div>
                </div>
              </div>
              <el-button @click="submitComment(file.fileId)" type="success" plain style="margin-right: 20px">提交
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!--    其他用户评论-->
    <div class="otherComment">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>评论列表 &nbsp ({{ commentList.length }}条)</span>
        </div>
        <!--所有评论内容-->
        <div class="text item">
          <!-- 一条评论-->
          <BaseCommentDetail :key="index" v-for="(com,index) in commentList"
                             :file-id="file.fileId"
                             :comment="com">
            <div v-if="com.childComments.length>0" slot="reply" class="reply" style="background-color: #abb8c3">
              <!--              回复部分-->
              <i class="el-icon-caret-top"/>
            </div>
          </BaseCommentDetail>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import WebHeader from "@//view/layout/WebHeader";
import WebAside from "@//view/layout/WebAside";
import BaseCommentDetail from "@//components/base/BaseCommentDetail";
import {getCommentByFileId, getFileById, saveComment} from "@//assets/http/request";

export default {
  name: "SoftDetailSpider",
  components: {BaseCommentDetail, WebAside, WebHeader},
  data() {
    return {
      //要提交的针对文件的评价
      comment: {
        //评论内容
        content: '',
        //用户id
        userId: '',
        //文件id
        fileId: '',
        //父级
        parentId: -1
      },
      file: {
        article: '预知后事如何,请听下回分解'
      },
      commentList: []
    }
  },
  methods: {
    // 提交评论
    submitComment(fileId) {
      let userId = JSON.parse(localStorage.getItem("USER")).id;
      this.comment.fileId = fileId;
      this.comment.userId = userId;
      saveComment(this.comment).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: '评论已经提交'
          })
          this.comment.content = "";
        } else {
          this.$message({
            type: "error",
            message: "评论保存失败"
          })
        }
      })
      this.getComments();
    },
    getFile() {
      let id = this.$route.query.id;
      getFileById(id).then(res => {
        this.file = res.data.data;
        //获取文件相关的评价
        this.getComments();
      });
    },
    //获取对当前文件的全部评价
    getComments() {
      getCommentByFileId(this.file.fileId).then(res => {
        this.commentList = res.data.data;
        console.log("当前评论列表", this.commentList);
      })
    },
  },
  computed: {
    username() {
      let user = JSON.parse(localStorage.getItem("USER"));
      return user.userName;
    },
    avatarUrl() {
      return JSON.parse(localStorage.getItem("USER")).avatarUrl;
    }
  },
  mounted() {
    this.getFile();
    this.$bus.$on('updateCommentList',()=>{
      this.getComments();
    })
  },
}
</script>

<style scoped>

/*.reply:before {*/
/*  position: absolute;*/
/*  left: 15px;*/
/*  top: -17px;*/
/*  border: 9px solid transparent;*/
/*  border-bottom: 10px solid #f8f8f8;*/
/*}*/

.comment {
  font-size: 20px;
  line-height: 1.6;
}

ul > li {
  list-style-type: none; /* 先去除小圆点 */
}

.changeArticle {
  background-image: url("https://www.giaott.com/images/2022/09/14/dCzz7.jpg");
  background-color: #0c1622;
  width: 45%;
  height: 100px;
  text-align: center;
  line-height: 50px

}

.collection span {
  margin: 2px 10px;
}

.mainContent, .related, .comment, .otherComment, .page {

  margin-top: 20px;
  margin-left: 187px;

  width: 1081px;
  font-size: 21px;
  line-height: 2.0;

  animation: bounce;
  animation-duration: 2s;


}

.aside {
  position: absolute;
  right: 190px;
  top: 91px;
}

a {
  color: green;
}
</style>
